<template>
	<div class="box">
		<!-- 搜索组件 -->
		<el-row>
			<el-form
				:inline="true"
				:model="listQuery"
				class="demo-form-inline"
				size="medium"
			>
				<el-col :span="18">
					<el-form-item v-if="searchBarData.timeTypeList.length > 2">
						<el-select
							placeholder="全部"
							size="medium"
							v-model="queryTime.type"
							@change="handleTimeDisable"
							@clear="handleTimeDisable"
						>
							<el-option
								v-for="(item, index) in searchBarData.timeTypeList"
								:key="index"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="searchBarData.timeTypeList.length < 2">
						<label>{{ searchBarData.timeTypeList[0].label }}</label>
					</el-form-item>
					<el-form-item>
						<el-date-picker
							size="medium"
							:disabled="timeDisabled"
							@focus="hasTimeType"
							v-model="queryTime.value"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							value-format="yyyy-MM-dd"
							@change="getTimeVal"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-select
							placeholder="全部"
							v-model="queryObj.type"
							@change="get_custom_type"
						>
							<el-option
								:label="item.label"
								:value="item.value"
								v-for="(item, index) in searchBarData.customQueryList"
								:key="index"
							></el-option>
						</el-select>
						<el-input
							class="no-border"
							placeholder="请输入内容"
							v-model="listQuery.custom_query_value"
							autofocus
							clearable
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item>
						<el-button type="primary" class="btn_bg" @click="handleRefresh"
							>查询</el-button
						>
						<el-button @click="handleReset">重置</el-button>
					</el-form-item>
				</el-col>
				<el-col :span="2" class="tr">
					<el-button
						class="close"
						@click="handleShow($event)"
						v-if="isOpen === true"
						icon="el-icon-arrow-down"
						type="text"
						>展开筛选
					</el-button>
					<el-button
						class="close"
						@click="handleShow($event)"
						v-if="isClose === true"
						icon="el-icon-arrow-up"
						type="text"
						>收起筛选
					</el-button>
				</el-col>
			</el-form>
		</el-row>
		<el-row>
			<el-col :span="2">
				<span class="title">筛选条件:</span>
				<el-tag
					:key="tag"
					v-for="tag in allCheckList"
					closable
					:disable-transitions="false"
					@close="handleClose(tag)"
				>
					{{ tag.name }}</el-tag
				>
			</el-col>
		</el-row>
		<section v-if="isShow">
			<!-- 去掉
			<el-row>
				<span class="title">就诊类型:</span>
				<template>
					<el-checkbox-group v-model="vistCheckedList" size="medium">
						<el-checkbox-button v-for="(item, index) in vistTypes" :label="item.name" :key="index"
							@change="getCheckVal($event, item)">
							{{
							item.name
							}}
						</el-checkbox-button>
					</el-checkbox-group>
				</template>
			</el-row>
			-->
			<el-row>
				<span class="title">检查科室:</span>
				<el-checkbox-group v-model="vistCheckedList" size="medium">
					<el-checkbox
						v-for="(item, index) in departmengData"
						:label="item.name"
						:key="index"
						@change="getCheckVal($event, item)"
					>
						{{ item.name }}
					</el-checkbox>
				</el-checkbox-group>
			</el-row>
			<el-row>
				<span class="title">检查类型:</span>
				<el-checkbox-group v-model="vistCheckedList" size="medium">
					<el-checkbox-button
						v-for="(item, index) in checkTypes"
						:label="item.name"
						:key="index"
						@change="getCheckVal($event, item)"
					>
						{{ item.name }}
					</el-checkbox-button>
				</el-checkbox-group>
			</el-row>
		</section>
	</div>
</template>

<script>
export default {
	name: 'search-bar',
	components: {},
	props: {
		searchBarData: {
			type: Object,
			required: false,
			default: {
				/* 	timeTypeList: [
						{ label: '不限', value: 0 },
						{ label: '检查时间', value: 1 },
						{ label: '报告时间', value: 2 },
						{ label: '审核时间', value: 3 },
						{ label: '归档时间', value: 4 },
						{ label: '创建时间', value: 5 }
					],
					customQueryList: [
						{ label: '不限', value: null },
						{ label: '患者姓名', value: 0 },
						{ label: '病历号', value: 1 },
						{ label: '检查号', value: 2 },
						{ label: '身份证号', value: 3 },
						{ label: '患者编号', value: 4 },
						{ label: '门诊号', value: 5 },
					] */
			}
		}
	},
	data () {
		return {
			queryTime: {
				type: this.searchBarData.timeTypeList[ 0 ].value,
				value: null
			},
			queryObj: {
				type: this.searchBarData.customQueryList[ 0 ].value,
				value: null
			},
			isShow: false,
			isOpen: true,
			isClose: false,
			// 以下参数后台动态返回
			vistTypes: [
				{
					name: '不限',
					type: 0,
				},
				{
					name: '门诊',
					type: 1,
				},
				{
					name: '住院',
					type: 2,
				},

				{
					name: '急诊',
					type: 3,
				},
				{
					name: '其他',
					type: 4,
				},
			],
			// 检查类型
			checkTypes: [
				{
					name: '不限',
					type: 0,
				},
				{
					name: 'CR',
					type: 8,
				},
				{
					name: 'DR',
					type: 1,
				},
				{
					name: 'DX',
					type: 2,
				},
				{
					name: 'XA',
					type: 3,
				},
				{
					name: 'RF',
					type: 5,
				},
				{
					name: 'CT',
					type: 6,
				},
				{
					name: 'MR',
					type: 7,
				},
			],
			departmengData: [
				{
					name: '不限',
					type: 0,
				},
				{
					name: '超声科',
					type: 1,
				},
				{
					name: '内镜科',
					type: 2,
				},
				{
					name: '检验科',
					type: 3,
				},
				{
					name: '核医学科',
					type: 4,
				},
				{
					name: '心电科',
					type: 4,
				},
				{
					name: '特检科',
					type: 4,
				},
				{
					name: '病理科',
					type: 4,
				},
				{
					name: '其他科室',
					type: 4,
				},
			],
			vistCheckedList: [], // 筛选条件集合
			checkList: [], // 筛选条件集合
			checkBox: [], // 选择的
			timeVal: [],
			allCheckList: [],
			timeVal: [],
			listQuery: {
				time_type: null,
				start_time: null,
				end_time: null,
				custom_query_type: null,
				custom_query_value: null,
				depart_code: null,
				exam_type: null
			},
			val: null,
			timeDisabled: false,
			timeObj: {} // 时间类型
		}
	},
	mounted () {
		this.handleTimeDisable()
		this.get_custom_type()
	},
	methods: {
		handleRefresh () {
			// 查询
			console.log( this.listQuery );
			this.$emit( 'refreshSearch', this.listQuery )
		},
		handleReset () {
			//todo  重置表单
			this.queryTime = {
				type: this.searchBarData.timeTypeList[ 0 ].value,
				value: null
			}
			this.queryObj = {
				type: this.searchBarData.customQueryList[ 0 ].value,
				value: null
			}
			this.listQuery = {
				patient_name: null
			}
			// 重置
			for ( const key in this.listQuery ) {
				delete this.listQuery[ key ]
			}
			this.$emit( 'refreshSearch', {
				pagesize: 10,
				pageindex: 1
			} )
			this.handleRefresh()
		},
		handleInputType () {
			// 搜索项
			// 清空
			this.queryObj.value = null
		},
		getIptData () {
			if ( this.queryObj.type ) {
				let key = this.queryObj.type,
					val = this.queryObj.value,
					obj = {}
				obj[ key ] = val
				this.listQuery = Object.assign( this.listQuery, obj )
			}
			this.$emit( 'refreshSearch', this.listQuery )
		},
		getCheckVal ( $event, item ) {
			const tempArr = []
			if ( $event === true ) {
				// todo 去重
				tempArr.push( item )
				console.log( tempArr )
				console.log( this.allCheckList )
				this.allCheckList = this.allCheckList.concat( tempArr )
				// 选中
			} else {
				// 取消选择
				this.allCheckList.filter( ele => {
					console.log( ele )
					return ele.name != item.name
				} )
			}
			console.log( this.allCheckList )
			// this.checkBox.push(item)
		},
		handleClose ( tag ) {
			// 关闭标签
			this.allCheckList.splice( this.allCheckList.indexOf( tag ), 1 )
		},
		handleShow ( $event ) {
			// 是否展开筛选
			if ( $event.target.innerText == '展开筛选' ) {
				this.isShow = true
				this.isOpen = false
				this.isClose = true
			} else {
				this.isShow = false
				this.isOpen = true
				this.isClose = false
			}
		},
		handleTimeDisable ( val ) {
			if ( this.queryTime.type ) {
				this.listQuery.time_type = this.queryTime.type
			} else {
				this.timeDisabled = true
			}
			// 时间清空 -- 后续处理
			this.queryTime.value = []
		},
		getTimeVal () {
			console.log( this.queryTime.value );
			console.log( ">>>>>>>" );
			try {
				if ( this.queryTime.value !== null ) {
					// 时间赋值
					this.listQuery.start_time = this.queryTime.value[ 0 ]
					this.listQuery.end_time = this.queryTime.value[ 1 ]
				} else {
					this.listQuery.start_time = null
					this.listQuery.end_time = null
				}
			} catch {
				console.log( 'error' );
			}
		},
		hasTimeType () {
			if ( this.queryTime.type ) {
				console.log( this.query );
			} else {
				this.$message.warning( '请选择时间类型' )
			}
		},
		get_custom_type () {
			this.listQuery.custom_query_type = this.queryObj.type
		}
	},
}
</script>

<style  lang="less" scoped>
.box {
	.el-checkbox-group {
		display: inline-block;
	}
	.title {
		margin-right: 1.5vw;
		font-size: 14px;
	}
	.close {
		color: #3399ff;
	}
	.el-row {
		margin-top: 5px;
	}
	.el-checkbox-button {
		margin-right: 1.5vw;
	}
	.el-checkbox-button__inner {
		vertical-align: none;
		border: none !important;
	}
	.el-tag + .el-tag {
		margin-left: 10px;
	}
	.el-col-4 {
		text-align: right;
	}
	.el-select .el-input {
		width: 130px;
	}
	.el-input {
		width: 16vw;
	}
}
.el-button {
	width: 80px !important;
}
.el-input__inner {
	border-radius: 0;
}
.no-border {
	border-left: 0;
}
</style>
